<template>
  <div>
    <h3>配置表单Demo</h3>
    <el-card>
    <module-form

      :config="config"
      :raw-data="initData"
      ref="moduleForm"
      @submit="handleSubmit"
      @close="handleCancel"
    ></module-form></el-card>
    <h3>配置表单参数</h3>
    <h5>Config配置</h5>
    <el-input type="textarea" v-model="optionStr" :autosize="autosize"> </el-input>
    <h5>Data配置</h5>
    <el-input type="textarea" :value="format(initData)" :autosize="autosize"> </el-input>
  </div>

</template>

<script>
  import ModuleForm from '../../simpleForm/index'
  import { config, formData } from './model'
  import * as utils from '../../../utils/index'
  export default {
    data () {
      return {
        config: config.items,
        initData: formData,
        autosize:{minRows:5,maxRows:18}
      }
    },
    computed: {
      optionStr () {
        return this.format(this.config)
      }
    },
    methods: {
      format(data){
        return utils.formatJson(JSON.stringify(data))
      },
      handleSubmit (data) {
        console.log(data)
        this.$message({
          type: 'success',
          message: `handleSubmit`
        })
      },
      handleCancel(){
        this.$message({
          type: 'success',
          message: `handleCancel`
        })
      }
    },
    components: {
      ModuleForm
    }
  }
</script>

<style lang="css">
</style>
